<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>4.人员案例_computed实现</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="demo">
      <input type="text" v-model="keyword">
      <ul>
        <li v-for="p in newPersons" :key="p.id">
          {{p.name}} - {{p.age}} - {{p.gender}}
        </li>
      </ul>
    </div>

    <script type="text/javascript">
      new Vue({
        el:'#demo',
        data:{
          keyword:'',
          persons:[
            {id:'gyastrdt1',name:'马冬琪',age:18,gender:'女'},
            {id:'gyastrdt2',name:'周冬雨',age:19,gender:'女'},
            {id:'gyastrdt3',name:'周杰伦',age:20,gender:'男'},
            {id:'gyastrdt4',name:'温兆伦',age:21,gender:'男'}
          ],
        },
        computed: {
          newPersons(){
            return this.persons.filter( p => p.name.includes(this.keyword))
          }
        }
      })
    </script>
  </body>
</html>